<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('人口库核查管理')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row" id="renkouhechalist">

        <!--登录信息-->
        <input name="userid" th:value="${session.userid}" type="hidden" id="userid">
        <input name="username" th:value="${session.username}" type="hidden" id="username">
        <input name="deptid" th:value="${session.deptid}" type="hidden" id="deptid">
        <input type="hidden" th:value="${piciid}" id="piciid"/>


        <div class="col-sm-12 search-collapse">
            <form id="formId1">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="width: 100px">专家姓名&nbsp;&nbsp;</label>
                            <input style="width: 150px !important;" type="text" name="zhuanjiaxingming" v-model="zhuanjiaxingming"/>
                        </li>
                        <li>
                            <label style="width: 100px">特贴管理单位&nbsp;&nbsp;</label>
                            <input style="width: 150px !important;" type="text" name="danweimingcheng" v-model="danweimingcheng"/>
                        </li>
                        <li>
                            <label style="width: 150px !important;">特贴管理单位层级&nbsp;&nbsp;</label>
                            <select style="width: 150px !important;" v-model="danweicengji" class="form-control" type="text">
                                <option value="">请选择</option>
                                <option value="1">一级单位</option>
                                <option value="2">二级单位</option>
                                <option value="3">三级单位</option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 100px">工作单位&nbsp;&nbsp;</label>
                            <input style="width: 150px !important;" type="text" name="gongzuodanwei" v-model="gongzuodanwei"/>
                        </li>
                        <li>
                            <label style="width: 100px">是否处理&nbsp;&nbsp;</label>
                            <select style="width: 150px !important;"  @change="bindQushiquerenDeptList" class="form-control" v-model="shifouchuli">
                                <option selected value="">全部</option>
                                <option value="0">待处理</option>
                                <option value="1">已处理</option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 100px">处理日期&nbsp;&nbsp;</label>
                            <input style="width: 150px !important;" type="text" class="" placeholder="请选择处理日期" name="chuliriqi" id="chuliriqi"
                                   v-model="chuliriqi" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"
                                   @blur="getDate_chuliriqi"/>

                        </li>
                        <li class="sousuo">
                            <a class="btn btn-success btn-md" @click="bindQushiquerenDeptList"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-md" @click="reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">

            <table id="bootstrap-table" class="table table-hover table-primary table-striped">
                <thead>
                <tr>
                    <th style="text-align: center; vertical-align: middle;">序号</th>
                    <th style="text-align: center; vertical-align: middle;">专家姓名</th>
                    <th style="text-align: center; vertical-align: middle;">特贴管理单位</th>
                    <th style="text-align: center; vertical-align: middle;">特贴管理单位层级</th>
                    <th style="text-align: center; vertical-align: middle;">工作单位</th>
                    <th style="text-align: center; vertical-align: middle;">是否处理</th>
                    <th style="text-align: center; vertical-align: middle;">处理日期</th>
                    <th style="text-align: center; vertical-align: middle;">处理结果</th>
                    <th style="text-align: center; vertical-align: middle;">说明</th>
                    <th style="text-align: center; vertical-align: middle;">联系方式</th>
                    <th style="text-align: center; vertical-align: middle;">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(qushiquerenitem,index) in qushiquerenlist" v-if="qushiquerenlist.length > 0">
                    <td style="vertical-align: middle; text-align: center;" v-text="index+1"></td>
                    <td style="vertical-align: middle; text-align: center;"
                        v-text="qushiquerenitem.xingming"></td>
                    <td style="vertical-align: middle; text-align: center;" v-text="qushiquerenitem.suoshudanwei"></td>
                    <td style="vertical-align: middle; text-align: center;"
                        v-text="qushiquerenitem.jigoujibie"></td>
                    <td style="vertical-align: middle; text-align: center;"
                        v-text="qushiquerenitem.gongzuodanwei"></td>
                    <td style="vertical-align: middle; text-align: center;"
                        :class="qushiquerenitem.shifouchuli==0?'red':'green'" v-text="qushiquerenitem.shifouchuli==0?'待处理':'已处理'"></td>
                    <td style="vertical-align: middle; text-align: center;" v-text="qushiquerenitem.chuliriqi"></td>
                    <td style="vertical-align: middle; text-align: center;" v-text="qushiquerenitem.chulijieguo"></td>
                    <td style="vertical-align: middle; text-align: center;" v-text="qushiquerenitem.shuoming"></td>
                    <td style="vertical-align: middle; text-align: center;">
                        <button class="btn-success btn btn-md" @click="toLianxifangshi(qushiquerenitem)">查看</button>
                    </td>
                    <td style="vertical-align: middle; text-align: center;">
                        <!--<button class="btn-warning btn btn-rounded btn-md" @click="">发短信</button>-->
                        <button class="btn-warning btn btn-md" @click="toZhanneixin(qushiquerenitem)">发站内信</button>
                    </td>
                </tr>
                <tr v-if="qushiquerenlist.length == 0">
                    <td style="text-align: center; vertical-align: middle" colspan="12">查无数据</td>
                </tr>
                </tbody>
            </table>
            <div v-if="recordCount != '0'" class="my-page-navigation" style="text-align:center;">
                <button class="btn btn-default" @click="firstPage">首页</button>
                <button class="btn btn-default" @click="prePage">上一页</button>
                <select class="custom-select border-secondary" v-model="pagesize">
                    <option value="10">10 条/页</option>
                    <option value="20">20 条/页</option>
                    <option value="30">30 条/页</option>
                    <option value="50">50 条/页</option>
                </select>
                <span v-text="pageindex + '  /  ' + pageCount" style="border-color: #6c757d"></span>
                <span v-text="'共' + recordCount + '条'" style="border-color: #6c757d"></span>
                <button class="btn btn-default" @click="nextPage">下一页</button>
                <button class="btn btn-default" @click="lastPage">尾页</button>
                <span style="border-color: #6c757d">跳到第</span>
                <input type="text" class="form-control border-secondary" style="width:50px;display:inline;" v-model="targetpage" @keyup.enter="targetPage">
                <span style="border-color: #6c757d">页</span>
                <button class="btn btn-default" @click="targetPage">跳</button>
            </div>
        </div>

        <!-- 上传模态框（Modal） -->
        <div id="uploadModal" class="modal fade bs-example-modal-lg"
             tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-md" style="width: 800px">
                <div class="modal-content" style="width: 800px">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true">&times;
                        </button>
                        <h3 class="modal-title" id="myDetailModalLabel"></h3>
                    </div>
                    <div class="modal-body" id="uploadModal-body" style="width: 800px;margin:0px auto;">
                    </div>
                </div>
            </div>
        </div>

        <div th:fragment="edits" >
            <div id="QushilistModal" style="" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog modal-md" style="width: 1500px;height:400px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                            <h4 class="modal-title">查看导入名单</h4>
                        </div>
                        <div class="modal-body" style="height: 400px;overflow: scroll;">
                            <table class="table table-hover table-striped" style="width:1150px;margin: 0 auto;" id="list_qushiqueren">
                                <thead>
                                <th style="text-align: center; vertical-align: middle;width:50px;">序号</th>
                                <!--<th style="text-align: center; vertical-align: middle;width:100px;">专家ID</th>-->
                                <th style="text-align: center; vertical-align: middle;width:100px;">姓名</th>
                                <!--<th style="text-align: center; vertical-align: middle;width:100px;">单位代码</th>-->
                                <th style="text-align: center; vertical-align: middle;width:100px;">所属单位</th>
                                <th style="text-align: center; vertical-align: middle;width:100px;">工作单位</th>
                                <th style="text-align: center; vertical-align: middle;width:100px;">身份证号</th>
                                <th style="text-align: center; vertical-align: middle;width:100px;">死亡（注销）标识</th>
                                <th style="text-align: center; vertical-align: middle;width:100px;">死亡日期</th>
                                <th style="text-align: center; vertical-align: middle;width:100px;">备注</th>
                                <th style="text-align: center; vertical-align: middle;width:100px;">导入状态</th>
                                <th style="text-align: center; vertical-align: middle;width:100px;">操作</th>
                                </thead>
                                <tbody>
                                <tr v-for="(qushiitem,index) in qushiquerens">
                                    <td style="text-align: center; vertical-align: middle;"
                                        v-text="index+1"></td>
                                    <!--<td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.专家ID"></td>-->
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.姓名"></td>
                                    <!--<td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.单位代码"></td>-->
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.所属单位"></td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.工作单位"></td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.身份证号"></td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.死亡标识"></td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.死亡日期"></td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input v-model="qushiitem.备注"></td>
                                    <td style="text-align: center; vertical-align: middle;"
                                        class="daoruzhuangtai" :id="index+1"></td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <button class="btn btn-sm btn-primary"  @click="dangedaoru(qushiitem,index+1)">导入</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div style="width:100%;height:100px;text-align:center;">
                            <button id="daoru" class="btn btn-lg btn-info" style="margin-top:30px;" @click="importQushi()">批量导入</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal -->
            </div>
        </div>

        <div th:fragment="lianxifangshi">
            <div id="lianxifangshiModal" style="" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" data-keyboard="false">
                <div class="modal-dialog modal-md" style="width:1000px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel2"></h4>
                        </div>
                        <div class="modal-body" style="overflow: auto;">

                            <!--专家联系方式-->
                            <table id="bootstrap-table" class="table table-hover table-primary table-striped">
                                <thead>
                                <tr>
                                    <th colspan="2" style="text-align: center; vertical-align: middle;">专家联系方式</th>
                                </tr>
                                </thead>
                                <tr>
                                    <td style="vertical-align: middle; text-align: center;">手机</td>
                                    <td style="vertical-align: middle; text-align: center;" v-if="zhanghuxinxi.shoujihaoma!=null" v-text="zhanghuxinxi.shoujihaoma"></td>
                                    <td style="vertical-align: middle; text-align: center;" v-else>暂无</td>
                                </tr>
                                <tr>
                                    <td style="vertical-align: middle; text-align: center;">电话号码</td>
                                    <td style="vertical-align: middle; text-align: center;" v-if="zhanghuxinxi.dianhuahaoma!=null" v-text="zhanghuxinxi.dianhuahaoma"></td>
                                    <td style="vertical-align: middle; text-align: center;" v-else>暂无</td>
                                </tr>
                                <tr>
                                    <td style="vertical-align: middle; text-align: center;">电子邮件</td>
                                    <td style="vertical-align: middle; text-align: center;" v-if="zhanghuxinxi.dianziyoujian!=null" v-text="zhanghuxinxi.dianziyoujian"></td>
                                    <td style="vertical-align: middle; text-align: center;" v-else>暂无</td>
                                </tr>
                                <tr>
                                    <td style="vertical-align: middle; text-align: center;">邮编</td>
                                    <td style="vertical-align: middle; text-align: center;" v-if="zhanghuxinxi.youbian!=null" v-text="zhanghuxinxi.youbian"></td>
                                    <td style="vertical-align: middle; text-align: center;" v-else>暂无</td>
                                </tr>
                            </table>

                            <!--单位联系方式-->
                            <table id="bootstrap-table" class="table table-hover table-primary table-striped">
                                <thead>
                                <tr>
                                    <th style="text-align: center; vertical-align: middle;">单位</th>
                                    <th style="text-align: center; vertical-align: middle;">单位层级</th>
                                    <th style="text-align: center; vertical-align: middle;">经办人</th>
                                    <th style="text-align: center; vertical-align: middle;">手机</th>
                                    <th style="text-align: center; vertical-align: middle;">办公电话</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(zhanghaoxinxiItem,index) in zhanghaoxinxiList"  v-if="zhanghaoxinxiList.length > 0">
                                    <td style="vertical-align: middle; text-align: center;" v-text="zhanghaoxinxiItem.deptname"></td>
                                    <td style="vertical-align: middle; text-align: center;" v-if="zhanghaoxinxiItem.deptlevel==1">一级单位</td>
                                    <td style="vertical-align: middle; text-align: center;" v-else-if="zhanghaoxinxiItem.deptlevel==2">二级单位</td>
                                    <td style="vertical-align: middle; text-align: center;" v-else-if="zhanghaoxinxiItem.deptlevel==3">三级单位</td>
                                    <td style="vertical-align: middle; text-align: center;" v-else></td>
                                    <td style="vertical-align: middle; text-align: center;" v-text="zhanghaoxinxiItem.jingbanren"></td>
                                    <td style="vertical-align: middle; text-align: center;" v-text="zhanghaoxinxiItem.jingbanrenshouji"></td>
                                    <td style="vertical-align: middle; text-align: center;" v-text="zhanghaoxinxiItem.jingbanrenbangongdianhua"></td>
                                </tr>
                                <tr v-if="zhanghaoxinxiList.length == 0">
                                    <td style="text-align: center; vertical-align: middle" colspan="6">查无数据</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div th:fragment="xiaoxi">
            <div id="xiaoxiModal" style="" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false">
                <div class="modal-dialog modal-md" style="width:700px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="xiaoxiModalLabel"></h4>
                        </div>
                        <div class="modal-body" style="overflow: auto;">

                            <form class="form-horizontal m" id="form-xiaoxi-add">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">邮件标题</label>
                                    <div class="col-sm-8">
                                        <textarea id="biaoti" style="height: 100px" name="biaoti" class="form-control" required></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">邮件内容</label>
                                    <div class="col-sm-8">
                                        <textarea style="height: 200px" id="neirong" name="neirong" class="form-control" required></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">接收人</label>
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                            <input name="jieshouren"  id="jieshourennames" type="text"
                                                   class="form-control" th:value="${jieshouren}" readonly>
                                            <input name="jieshourenid" id="jieshourenids" class="form-control" style="display:none"  th:value="${jieshourenid}">
                                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" @click="submitHandler(1)">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:src="@{/js/plupload/plupload.js?v=1.0}"></script>
<script th:src="@{/js/plupload/plupload.full.js?v=1.0}"></script>
<script th:src="@{/js/system/zhuanjia/renkouhechalist.js?v=1.2}"></script>

</body>
</html>

<style>
    .green {
        color: green;
    }

    .red {
        color: red;
    }
</style>